.lb {
    width: 100%;
    height: 500px;
    margin-top: 500px;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.slider {
    overflow: hidden;
    width: 1000px;
    height: 700px;
}

.slider .slides {
    display: flex;
    transition: transform 0.5s;
    width: 100%;
    height: 700px;
}

.slider .slide {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    height: 100%;
}

.b3 {
    width: 500px;
    overflow: hidden;
    height: 700px;
}

.b2 {
    display: flex;
    transition: transform 0.5s;
    width: 100%;
    height: 700px;
}

.b1 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    height: 100%;
}

.b1 img {
    width: 100%;
    height: 100%;
}

.l-1 img {
    width: 500px;
    height: 300px;
}

.l-1 {
    width: 500px;
    height: 300px;
    overflow: hidden;
}

.l-1-1 {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    transition: transform 0.5s;
}

.l1 {
    display: flex;
    flex: 0 0 100%;
}

.l-2 {
    width: 500px;
    height: 300px;
    overflow: hidden;
}

.l2 img {
    width: 500px;
    height: 300px;
}

.l-2-1 {
    display: flex;
    transition: transform 0.5s;
    justify-content: content-right;
    flex-direction: row-reverse;
}

.l2 {
    width: 500px;
    height: 300px;
    flex: 0 0 -100%;
}

.box1 {
    width: 500px;
    position: absolute;
    height: 500px;
    margin-left: 400px;
   
    overflow: hidden;
}

.b-1 {
    display: flex;
    transition: transform 0.5s;
    align-items: flex-start;
    flex-direction: column;
}

.op {
    width: 500px;
    height: 500px;
}

.op img {
    width: 500px;
    height: 500px;
}
.d-1{
     transform:translate(-150px, -50px);
     z-index: 1;
}
.d-2{
     transform: skew(0deg, 0deg)
     translate(50px, 190px);
     ;
     z-index: 100;
}
.d-3{
    transform: skew(40deg, 00deg)
    translate(-7px, -50px);
    ;
    height: 240px;
    z-index: 98;
}
.d-3 img{
    height: 240px;
}
.d-4{
    transform: skew(0deg, 50deg)
    translate(-150px, 247px);
    width: 200px;
    z-index: 99;
}
.d-4 img{
    width: 200px;
}
.d-5{
    transform: skew(40deg, 00deg)
    translate(-426px, 450px)
    ;
    height: 240px;
    z-index: 95;
}
.d-6{
    transform: skew(0deg, 50deg)
    translate(350px, -350px)
    ;
    width: 200px;
    z-index: 95;
}
 
.d-6 img{
    width: 200px;
}
.sDst{
    float: left;
    width: 100%;
    height: 100px;
}
.box2{
    width: 500px;
    height: 200px;
    float: left;
    margin-top: 700px;
    margin-left: 500px;
    overflow: hidden;
}
.a-1{
    width: 2100px;
    height: 200px;
    display: flex;
    margin-left: -270px;
    transition: transform 1s;
}
.a-2{
    width:350px ;
    height:200px ;
    padding:0px 20px;
   
}
.a-2 img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.a-3{
    height:90%;
}